feat(Trees): add 101. Symmetric Tree implementation and fix README#327
Conversation
✅ Deploy Preview for algorithm-datastructures-math-studies ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughSummary by CodeRabbit
WalkthroughLeetCode「101. Symmetric Tree」向けの多言語解説(Python/Go/TypeScript/Rust)と日本語README、Tailwind/Prism/React組み込みのインタラクティブHTMLを追加。公開HTMLとサイトインデックスを更新し、レッスン数を1件増加。 Changes
Sequence Diagram(s)sequenceDiagram
participant User as ユーザー
participant Browser as ブラウザ
participant StepsApp as StepsApp (React)
participant TreeViz as TreeViz (SVG)
participant Prism as Prism (SyntaxHighlighter)
User->>Browser: ページを開く / 操作(Play/Next等)
Browser->>StepsApp: マウント / stepsData 読み込み
StepsApp->>TreeViz: 現在の step を渡して描画
StepsApp->>Prism: 初回ハイライト要求 (Prism.highlightAll())
StepsApp->>StepsApp: タイマー起動(2秒毎で activeStep 更新)
Note right of StepsApp: 最終ステップで再生停止・完了表示
StepsApp->>TreeViz: タイマー毎に更新された step を送信(ノード強調)
User->>StepsApp: Next/Prev/Reset で直接 state 更新
推定コードレビュー時間🎯 4 (Complex) | ⏱️ ~45 minutes ポエム
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
public/index.html (1)
419-822:⚠️ Potential issue | 🟠 Major
public/index.htmlは手動編集禁止です —python generate_index.pyで自動生成してください。コーディングガイドラインに従い、このファイルは
generate_index.pyによって自動生成されるべきです。手動で編集された変更(レッスン数の更新、新しいアイテムカードの追加、日付の更新)は、次回スクリプト実行時に上書きされます。正しいワークフロー:
- 新しい
README_react.htmlファイルをリポジトリに追加python generate_index.pyを実行してpublic/index.htmlを再生成As per coding guidelines: "The public/index.html file must be auto-generated by python generate_index.py and never edited directly"
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@public/index.html` around lines 419 - 822, public/index.html was edited directly but must be auto-generated; revert manual changes and regenerate the file using the generator script. Remove your direct edits to public/index.html, add any new lesson files (e.g. new README_react.html) into the content tree, then run python generate_index.py to produce an updated public/index.html (ensuring the lesson count and footer date are updated by the script rather than manual edits).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@DataStructures/Trees/Other/101`. Symmetric Tree/claude sonnet 4.6
extended/README_react.html:
- Around line 239-240: 説明文が逆転しており誤解を招くので、「左の左子が null だが右の右子はnull →
非対称」と書かれている箇所を修正して、鏡対応が崩れている具体例を明記してください:left.left が null である一方で right.right は 3
なので null と 3 が一致せず非対称になる、という文に置き換えて(left.left と right.right のミスマッチを明示する)。
In `@DataStructures/Trees/Other/101`. Symmetric Tree/claude sonnet 4.6
extended/Symmetric_Tree_Python.md:
- Around line 75-77: Update the assertion in the "A(再帰)" / "再帰版" paragraph that
claims "スタック問題もなし" to accurately reflect CPython's recursion limits: change the
text to note that while recursion is readable and typically fine for balanced
trees, degenerate (chain) trees can reach the CPython default recursion depth
(~1000) and raise RecursionError; reference the file's earlier notes (冒頭の説明 and
用語解説) and the iterative implementation docstring as corroborating context so the
statement no longer contradicts the rest of the document.
In `@DataStructures/Trees/Other/101`. Symmetric Tree/claude sonnet 4.6
extended/Symmetric_Tree_TypeScript.md:
- Around line 206-210: The trace for Example 2 incorrectly shows a comparison
pair as isMirror(null, null); update that line to reflect the actual comparison
isMirror(left.left, right.right) → specifically isMirror(null, 3) (or
equivalent) so the accompanying explanation about left.left = null vs
right.right = 3 matches the shown function call; locate the Example 2 trace and
replace the mistaken isMirror(null, null) entry while keeping the surrounding
lines and the isMirror symbol intact.
- Around line 224-235: Replace the O(n²)-causing queue.shift() usage by
implementing a head index or a proper FIFO structure: keep the existing queue
variable (const queue: Array<[TreeNode | null, TreeNode | null]>), replace each
queue.shift() call with reading queue[head] and incrementing head, and stop when
head >= queue.length so the loop becomes O(n); alternatively swap to a native
Queue/Deque implementation if available. Also correct the Example 2 trace where
isMirror(null, null) is shown — update that call and its inline annotation to
isMirror(null, 3) (and any related comment) so the trace accurately reflects the
pair (right-right child 3).
---
Outside diff comments:
In `@public/index.html`:
- Around line 419-822: public/index.html was edited directly but must be
auto-generated; revert manual changes and regenerate the file using the
generator script. Remove your direct edits to public/index.html, add any new
lesson files (e.g. new README_react.html) into the content tree, then run python
generate_index.py to produce an updated public/index.html (ensuring the lesson
count and footer date are updated by the script rather than manual edits).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: f65d61ac-195d-4dd0-b6b1-2455d0e39c61
📒 Files selected for processing (9)
DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README.mdDataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.htmlDataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_Go.mdDataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_Python.mdDataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_Rust.mdDataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_TypeScript.mdDataStructures/Trees/Other/README.mdpublic/DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.htmlpublic/index.html
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (1)
DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_Python.md (1)
37-39:⚠️ Potential issue | 🟠 Major再帰安全性の説明が文書内で食い違っています。
Line 38 の「ノード数1000では問題なし」は、Line 8 と Line 75 で説明している「最悪ケースでは再帰深度が上限付近に達し得る」という注意と矛盾します。ここも「可読性は高いが、退化木では反復版が安全」に寄せないと、制約境界の読者を誤誘導します。
修正案
-- **最速手法**:再帰DFS。Pythonの関数呼び出しコストはあるが、ノード数1000では問題なし +- **最速手法**:再帰DFS。可読性は高いが、最悪ケースの一直線の木では再帰深度が上限付近に達し得るため、制約境界を安全に扱うなら反復版も候補🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@DataStructures/Trees/Other/101`. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_Python.md around lines 37 - 39, 「ノード数1000では問題なし」という一文が本文の他の注意(「最悪ケースでは再帰深度が上限付近に達し得る」)と矛盾しているため、該当箇所の表現をリワードして整合させてください;具体的には、現在の短評("ノード数1000では問題なし")を「再帰は可読性が高いが、退化した木(最悪ケース)では再帰深度がPythonの再帰制限に近づく可能性があるため、安全性を重視するなら反復版を推奨する」といった形に修正し、元の注意("最悪ケースでは再帰深度が上限付近に達し得る")と一貫するようにしてください(参照テキスト: "ノード数1000では問題なし" と "最悪ケースでは再帰深度が上限付近に達し得る")。
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@DataStructures/Trees/Other/101`. Symmetric Tree/claude sonnet 4.6
extended/README_react.html:
- Around line 1863-1879: The useEffect currently resets activeStep to 1 and
stops playback as soon as the final step is reached (timer branch where
activeStep === stepsData.length), which prevents Play from actually starting
playback from the beginning; change the effect so it only stops at the final
step (call setIsPlaying(false)) without resetting activeStep, and move the reset
logic into handlePlay so that when handlePlay is invoked and activeStep ===
stepsData.length you first setActiveStep(1) then setIsPlaying(true) to start
playback; update both useEffect (referencing useEffect, timerRef, isPlaying,
activeStep, stepsData.length) and handlePlay (referencing handlePlay,
setActiveStep, setIsPlaying) in both the local file and the public JSX copy.
- Around line 1318-1334: Update the conflicting guidance text so the
recursion-safety threshold is consistent: replace the list item that currently
reads "ノード数が1000以内(デフォルトスタック上限内)" and the item that reads "深さ > 1000" with
wording that warns about recursion risk when tree depth approaches the
interpreter recursion limit (e.g., "深さが約1000前後になる退化した木(深さ ≈
スタック上限)では再帰が危険になるため反復版を検討する"), and apply the same replacement to the identical
paragraph elsewhere in the documentation so both occurrences of these phrases
remain synchronized.
In `@DataStructures/Trees/Other/101`. Symmetric Tree/claude sonnet 4.6
extended/Symmetric_Tree_TypeScript.md:
- Around line 339-342: Update the explanatory text to match the current
head-index implementation: replace discussion of queue.shift() with an
explanation that the code uses a head index (head and queue[head], then head++)
to achieve O(1) dequeues instead of O(n) shifts; mention the variables queue and
head and the expressions queue[head] and head++ as the mechanism ensuring O(1)
operations and why this preserves performance (avoids array reindexing done by
queue.shift()).
- Around line 96-100: Replace the environment-specific claim about Node's
default stack depth in the 方法A(再帰) rationale with a neutral, general statement:
remove the assertion that "Nodeのデフォルトスタック深度は通常10,000以上" and instead state that
recursion is more readable but can risk stack overflow on very deep trees, so
the iterative approach (方法B(反復)) is a safer alternative for extreme depths and
different runtimes (ブラウザ/LeetCode/Node) without citing Node-specific stack
values.
---
Duplicate comments:
In `@DataStructures/Trees/Other/101`. Symmetric Tree/claude sonnet 4.6
extended/Symmetric_Tree_Python.md:
- Around line 37-39:
「ノード数1000では問題なし」という一文が本文の他の注意(「最悪ケースでは再帰深度が上限付近に達し得る」)と矛盾しているため、該当箇所の表現をリワードして整合させてください;具体的には、現在の短評("ノード数1000では問題なし")を「再帰は可読性が高いが、退化した木(最悪ケース)では再帰深度がPythonの再帰制限に近づく可能性があるため、安全性を重視するなら反復版を推奨する」といった形に修正し、元の注意("最悪ケースでは再帰深度が上限付近に達し得る")と一貫するようにしてください(参照テキスト:
"ノード数1000では問題なし" と "最悪ケースでは再帰深度が上限付近に達し得る")。
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 29bfae50-8d8b-4a56-a7e5-f32f855a9d42
📒 Files selected for processing (4)
DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.htmlDataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_Python.mdDataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_TypeScript.mdpublic/DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.html
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@public/DataStructures/Trees/Other/101`. Symmetric Tree/claude sonnet 4.6
extended/README_react.html:
- Around line 1578-1589: The nodeColor function has a faulty condition that
highlights when key is 'L' or 'R' if either highlightLeft === 'L' OR
highlightRight === 'R', causing e.g. an 'R' node to be highlighted when only
highlightLeft === 'L'; fix the condition in nodeColor to require matching pairs:
check (key === 'L' && highlightLeft === 'L') || (key === 'R' && highlightRight
=== 'R') so each side only highlights when its corresponding highlight variable
matches the key; keep the later Set-based check for other custom keys
(highlightLeft/highlightRight) as-is.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: e5c1d203-320e-43dc-accc-bef35fa42e3e
📒 Files selected for processing (4)
DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.htmlDataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_Python.mdDataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/Symmetric_Tree_TypeScript.mdpublic/DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.html
| function nodeColor(key) { | ||
| if (key === 'root' && highlightRoot) | ||
| return { fill: '#fef3c7', stroke: '#f59e0b', text: '#92400e' }; | ||
| if ( | ||
| (key === 'L' || key === 'R') && | ||
| (highlightLeft === 'L' || highlightRight === 'R') | ||
| ) | ||
| return { fill: '#d1fae5', stroke: '#059669', text: '#065f46' }; | ||
| const hl = new Set([highlightLeft, highlightRight]); | ||
| if (hl.has(key)) return { fill: '#bfdbfe', stroke: '#2563eb', text: '#1e40af' }; | ||
| return { fill: '#f8fafc', stroke: '#94a3b8', text: '#475569' }; | ||
| } |
There was a problem hiding this comment.
nodeColor 関数のハイライト条件に論理的な問題があります。
Line 1582-1584 の条件は、key === 'L' または key === 'R' のとき、highlightLeft === 'L' または highlightRight === 'R' であればハイライトされます。しかし、この論理だと例えば highlightLeft === 'L' の場合に key === 'R' のノードもハイライトされてしまいます。
本来の意図は「key が L で highlightLeft が L のとき」または「key が R で highlightRight が R のとき」ではないでしょうか。
🐛 修正案
function nodeColor(key) {
if (key === 'root' && highlightRoot)
return { fill: '#fef3c7', stroke: '#f59e0b', text: '#92400e' };
- if (
- (key === 'L' || key === 'R') &&
- (highlightLeft === 'L' || highlightRight === 'R')
- )
+ if (
+ (key === 'L' && highlightLeft === 'L') ||
+ (key === 'R' && highlightRight === 'R')
+ )
return { fill: '#d1fae5', stroke: '#059669', text: '#065f46' };
const hl = new Set([highlightLeft, highlightRight]);
if (hl.has(key)) return { fill: '#bfdbfe', stroke: '#2563eb', text: '#1e40af' };
return { fill: '#f8fafc', stroke: '#94a3b8', text: '#475569' };
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@public/DataStructures/Trees/Other/101`. Symmetric Tree/claude sonnet 4.6
extended/README_react.html around lines 1578 - 1589, The nodeColor function has
a faulty condition that highlights when key is 'L' or 'R' if either
highlightLeft === 'L' OR highlightRight === 'R', causing e.g. an 'R' node to be
highlighted when only highlightLeft === 'L'; fix the condition in nodeColor to
require matching pairs: check (key === 'L' && highlightLeft === 'L') || (key ===
'R' && highlightRight === 'R') so each side only highlights when its
corresponding highlight variable matches the key; keep the later Set-based check
for other custom keys (highlightLeft/highlightRight) as-is.
There was a problem hiding this comment.
🧩 Analysis chain
@myoshi2891 GitHubイシューを作成しました。完了したら上記のリンクをご確認ください。
🏁 Script executed:
#!/bin/bash
gh issue create \
--repo myoshi2891/Algorithm-DataStructures-Math-SQL \
--title "バグ: README_react.html の nodeColor 関数におけるハイライト条件の論理エラー(Symmetric Tree)" \
--assignee myoshi2891 \
--body "## 概要
PR [`#327`](https://github.com/myoshi2891/Algorithm-DataStructures-Math-SQL/pull/327) のレビューにて、\`public/DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.html\` 内の \`nodeColor\` 関数にハイライト条件の論理エラーが発見されました。
関連コメント: https://github.com/myoshi2891/Algorithm-DataStructures-Math-SQL/pull/327#discussion_r2963674839
リクエスト者: `@myoshi2891`
---
## 問題の詳細
以下の条件では、\`key === 'L'\` または \`key === 'R'\` のとき、\`highlightLeft === 'L'\` **または** \`highlightRight === 'R'\` であればハイライトされます。
この論理では、例えば \`highlightLeft === 'L'\` の場合に \`key === 'R'\` のノードもハイライトされてしまうという誤作動が発生します。
\`\`\`js
// 現在の誤った条件
if (
(key === 'L' || key === 'R') &&
(highlightLeft === 'L' || highlightRight === 'R')
)
\`\`\`
---
## 修正案
各ノードキーと対応するハイライト変数を正しく組み合わせることで修正できます。
\`\`\`diff
- if (
- (key === 'L' || key === 'R') &&
- (highlightLeft === 'L' || highlightRight === 'R')
- )
+ if (
+ (key === 'L' && highlightLeft === 'L') ||
+ (key === 'R' && highlightRight === 'R')
+ )
\`\`\`
---
## 影響範囲
- ファイル: \`public/DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.html\`
- 対象関数: \`nodeColor(key)\`
- 症状: インタラクティブなステップビジュアライゼーションで、左ノード(L)と右ノード(R)が誤って同時にハイライトされる場合がある
"
Length of output: 75
@myoshi2891 申し訳ありません。サンドボックス環境では GitHub CLI の認証トークンが利用できないため、イシューの自動作成ができませんでした。
以下の内容で手動でイシューを作成していただけますか?
タイトル:
バグ: README_react.html の nodeColor 関数におけるハイライト条件の論理エラー(Symmetric Tree)
本文:
## 概要
PR `#327` のレビューにて、`public/DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.html` 内の `nodeColor` 関数にハイライト条件の論理エラーが発見されました。
関連コメント: https://github.com/myoshi2891/Algorithm-DataStructures-Math-SDK/pull/327#discussion_r2963674839
---
## 問題の詳細
以下の条件では、`highlightLeft === 'L'` の場合に `key === 'R'` のノードも誤ってハイライトされてしまいます。
```js
// 現在の誤った条件
if (
(key === 'L' || key === 'R') &&
(highlightLeft === 'L' || highlightRight === 'R')
)修正案
- if (
- (key === 'L' || key === 'R') &&
- (highlightLeft === 'L' || highlightRight === 'R')
- )
+ if (
+ (key === 'L' && highlightLeft === 'L') ||
+ (key === 'R' && highlightRight === 'R')
+ )影響範囲
- ファイル:
public/DataStructures/Trees/Other/101. Symmetric Tree/claude sonnet 4.6 extended/README_react.html - 対象関数:
nodeColor(key) - 症状: ステップビジュアライゼーションで L・R ノードが誤って同時にハイライトされる場合がある
---
<details>
<summary>🧠 Learnings used</summary>
Learnt from: myoshi2891
Repo: myoshi2891/Algorithm-DataStructures-Math-SQL PR: 290
File: JavaScript/2630. Memoize II/Claude Code Sonnet 4.6 extended/README_react.html:2062-2066
Timestamp: 2026-02-23T03:22:09.013Z
Learning: JavaScript/2630. Memoize II/Claude Code Sonnet 4.6 extended/README_react.html では、ステップビジュアライゼーションのレイアウト比率として 1fr:3fr が意図的に使用されている。これは図表エリアにより多くのスペース(75%)を割り当てるためであり、他のファイルの 1fr:2fr とは異なる設計判断である。
---
Learnt from: myoshi2891
Repo: myoshi2891/Algorithm-DataStructures-Math-SQL PR: 311
File: public/Mathematics/Fundamentals/HackerRank/Claude/Easy/Halloween party/Halloween_party.html:225-226
Timestamp: 2026-02-27T04:52:11.348Z
Learning: In the public HTML assets (e.g., public/**/README_react.html and other HTML files), follow the architecture specified in CLAUDE.md: React 18 UMD + Babel Standalone. Browser-side JSX transpilation is an intentional design choice and currently affects ~90 files; migrating to a production build pipeline should be considered separately. Review public HTML files for JSX usage and ensure they align with this setup, documenting any deviations.
---
Learnt from: myoshi2891
Repo: myoshi2891/Algorithm-DataStructures-Math-SQL PR: 311
File: Mathematics/Fundamentals/HackerRank/Claude/Easy/Halloween party/Halloween_party.html:0-0
Timestamp: 2026-02-27T04:52:03.549Z
Learning: Follow the CLAUDE.md architecture: use React 18 UMD + Babel Standalone for HTML-based README_react.html style files. This pattern applies across HTML files (approx. 90 files). Do not flag Babel Standalone usage in HTML files, as it is an intentional design decision documented in the repository.
---
Learnt from: myoshi2891
Repo: myoshi2891/Algorithm-DataStructures-Math-SQL PR: 311
File: Mathematics/Fundamentals/HackerRank/Claude/Easy/Halloween party/Halloween_party.html:17-43
Timestamp: 2026-02-27T04:52:05.995Z
Learning: Do not require or add Subresource Integrity (SRI) attributes in HTML files for resources that are dynamically generated or processed by the build. In this repo, generate_index.py removes integrity attributes for any HTML tags referencing /vendor/ during the public build, and Tailwind CDN and Google Fonts do not support SRI. Therefore, SRI attributes are not effective for these sources; rely on the build script behavior and use SRI only where the generation process preserves or requires it.
</details>
<!-- This is an auto-generated reply by CodeRabbit -->
主な変更内容:
DataStructures/Trees/Other/README.mdの些細なフォーマット修正を行いました。主な変更内容:
shift()からポインタ方式に変更し、O(1) のデキュー性能に最適化しました。主な変更内容:
headポインタによる O(1) デキュー最適化を反映するように更新しました。